<template>
  <div class="mid-center">
    <div class="stack-wrapper">
      <stack ref="stack" :pages="someList" :stackinit="stackinit" />
    </div>
    <div class="stack-footer">
      <p class="footer-text">平台客服系统页面效果</p>
      <div class="controls">
        <i class="el-icon-arrow-left control-button" @click="prev" />
        <i class="el-icon-arrow-right control-button" @click="next" />
      </div>
    </div>
  </div>
</template>
<script>
import stack from 'vue-tantan-stack'
export default {
  data() {
    return {
      someList: [],
      stackinit: {
        visible: 3
      }
    }
  },
  mounted() {
    const that = this
    setTimeout(function() {
      that.someList = [
        { html: `<img src="/api/image/home/five/kf1.jpg" alt="01">` },
        { html: `<img src="/api/image/home/five/kf2.jpg" alt="02">` },
        { html: `<img src="/api/image/home/five/kf3.jpg" alt="03">` }
      ]
    }, 2000)
  },
  components: {
    stack
  },
  methods: {
    prev() {
      this.$refs.stack.$emit('prev')
    },
    next() {
      this.$refs.stack.$emit('next')
    }
  }
}
</script>
<style lang="scss" scoped>
.stack-wrapper {
  margin: 0 auto;
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 600px;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.stack-footer {
  position: relative;
  margin: 50px 0;
}
.controls {
  position: absolute;
  bottom:0;
  right: 0;
  width: 200px;
  text-align: center;
  z-index: 1002;
  display: flex; /*Flex布局*/
  display: -webkit-flex; /* Safari */
  justify-content: space-around;
  margin: 0 auto;
}
.control-button {
    cursor: pointer;
    font-size: 40px;
  }
  .footer-text{
    font-size: 13px;
    color: #9babc1;
  }
  ::v-deep .stack-item{
    border-radius: 10px;
    div{
      height: 100%;
      img{
        height: 100%;
        vertical-align: middle;
      }
    }
  }
@media screen and (max-width: 1200px) {
    .stack-wrapper {
        height: 500px !important;
    }
}

@media screen and (max-width: 992px) {
    .stack-wrapper {
        height: 400px !important;
    }
}

@media screen and (max-width: 768px) {
    .stack-wrapper {
        height: 300px !important;
    }
}
@media screen and (max-width: 680px) {
    .stack-wrapper {
        height: 250px !important;
    }
}
@media screen and (max-width: 576px) {
    .stack-wrapper {
        height: 200px !important;
    }
}
</style>